<template>
    <div class="ep-pic-list">
        <div class="ep-list" v-for="(item,index) in list" :key="index">
            <img :src="item.src" />
            <i class="ep-close-icon" @click="del(index)"></i>
        </div>
        <div class="ep-list" @click="upload" v-if="list.length < limit">
            <img src="../assets/add_photo.png" />
            <input type="file" accept="image/*" @change="fileChanged" ref="file" multiple="multiple" style="display: none;">
        </div>   
    </div>
</template>

<script>
export default {
    props: {
        imgList: {
            type: Array,
            default: [],
            required: true
        },
        limit: {
            type: String,
            default: 1
        },
        file: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            list: []
        }
    },
    methods: {
        upload() {
            if (this.imgList && this.imgList.length >= this.limit) {
                this.$toast({
                    message: `最多只能上传${this.limit}张图片，可点击图片右上角删除图片。`,
                    duration: 3000
                });
                return
            } else {
                this.$refs.file.click()
            }
        },
        fileChanged() {
            let self = this
            const list = this.$refs.file.files;
            if (list.length > 1) {
                this.$toast({
                    message: `最多只能选择1张图片。`,
                    duration: 3000
                });
                return
            }
            for (let i = 0; i < list.length; i++) {
                // let formData = new FormData();
                // formData.append(this.file, list[i]);
                // this.html5Reader(list[i], list);
                // self.$emit('uploadSuccess', formData);
                const item = {
                    name: list[i].name,
                    size: list[i].size,
                    file: list[i]
                }
                let imgSize = Math.floor(list[i].size / 1024);
                if(imgSize > 1024) {  
                    this.$toast({
                        message: `请选择1M以内的图片！`,
                        duration: 3000
                    }); 
                    return false;  
                }
                this.html5Reader(list[i], list);
                const formData = new FormData();
                formData.append("files", item.file);
                const xhr = new XMLHttpRequest();
                this.ep.showLoading();
                xhr.upload.addEventListener('progress', this.uploadProgress, false)
                xhr.open('POST', 'http://61.153.183.140:9204/hzsb_zw/app/img/upload', true)
                xhr.send(formData)
                xhr.onload = () => {
                    self.ep.hideLoading();
                    if (xhr.status === 200 || xhr.status === 304) {
                        let data = JSON.parse(xhr.response);
                        if (data.success) {
                            // self.imgList.push(item)
                            self.list.push({
                                src: data.body[0]
                            });
                            self.$emit('uploadSuccess', data.body[0]);
                        } else {
                            self.$toast({
                                message: `上传图片失败`,
                                duration: 3000
                            });
                        }
                    } else {
                        console.log(`error：error code ${xhr.status}`)
                    }
                }
            }
            this.$refs.file.value = ''
        },
        // 将图片文件转成BASE64格式
        html5Reader(file, list) {
            const reader = new FileReader()
            // reader.onload = (e) => {
                
            // }
            reader.readAsDataURL(file)
        },
        isContain(file) {
            this.imgList.forEach((item) => {
                if (item.name === file.name && item.size === file.size) {
                    return true
                }
            });
            return false
        },
        del: function(index) {
            this.imgList.splice(index, 1);
            this.list.splice(index, 1);
            this.$emit('index', index);
        }
    }
}
</script>


<style lang="less" scoped>
.ep-pic-list {
    .display-flex;
    .align-items;
    width: calc(100vw - .3rem);
    flex-wrap: wrap;
    .ep-list {
        position: relative;
        margin-right: .15rem;
        margin-bottom: .15rem;
        .ep-close-icon {
            width: .2rem;
            height: .2rem;
            background: url(../assets/icon_clear.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: -.1rem;
            right: -.1rem;
        }
    }
    img {
        width: .75rem;
        height: .75rem;
    }
}
</style>

